<!DOCTYPE html>
<html lang="en">

<head>
  <title>购物（超链接）页面</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/shopping.css">
</head>

<body>
  <header>
    <div id="header-content">
      <img src="../image/profile.jpg" id="top">
      <h1>sniper</h1>
    </div>
  </header>
  <nav>
    <ul>
      <a href="../html/index.html">首页</a>
      <a href="../html/search.html">搜索</a>
      <a href="../html/square.html">广场</a>
      <a href="../html/community.html">社区</a>
      <a href="../html/hot.html">热门</a>
      <a href="../html/room.html">房间</a>
      <a href="../html/shopping.html">购物（超链接）</a>
      <a href="../html/message.html">消息</a>
      <a href="../html/my.html">我的</a>
    </ul>
  </nav>
  <main>
    <section>
      <h2>欢迎来到购物页面</h2>
      <p>点击图片即可跳转购物链接</p>
      <!-- 添加阿里巴巴链接及对应的图片 -->
      <a href="https://www.alibaba.com/实际商品链接" target="_blank" data-link="https://www.alibaba.com/实际商品链接" class="product-link">
        <img src="../image/alibaba-item-image.jpg" alt="阿里巴巴商品图片" style="width: 100%; max-width: 200px; height: auto;">
      </a>
      <a href="https://www.alibaba.com/实际商品链接2" target="_blank" data-link="https://www.alibaba.com/实际商品链接2" class="product-link">
        <img src="../image/alibaba-item-image2.jpg" alt="阿里巴巴商品图片2" style="width: 100%; max-width: 200px; height: auto;">
      </a>
      <a href="https://www.alibaba.com/实际商品链接3" target="_blank" data-link="https://www.alibaba.com/实际商品链接3" class="product-link">
        <img src="../image/alibaba-item-image3.jpg" alt="阿里巴巴商品图片3" style="width: 100%; max-width: 200px; height: auto;">
      </a>
    </section>
  </main>
  <script>
    // 获取所有商品链接元素
    const productLinks = document.querySelectorAll('.product-link');
    // 遍历每个链接元素，添加点击事件监听器
    productLinks.forEach(link => {
      link.addEventListener('click', function (e) {
        e.preventDefault();  // 阻止默认的超链接跳转行为
        const targetLink = this.dataset.link;  // 获取自定义属性中存储的链接地址
        window.location.href = targetLink;  // 跳转到对应的链接
      });
    });
  </script>
</body>

</html>